/*
 * @version: 
 * @Author: yu
 * @Date: 2023-07-17 17:05:56
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-18 15:38:13
 */
import React, { useState,useImperativeHandle,forwardRef } from 'react';
import { Button, Form, Input, Select, Modal, Radio, Switch, message } from 'antd';
import { menuAdd,menuOne,menuUpdate } from '../../request/api'
const { Option } = Select;

const Index = forwardRef((props,ref) =>{
       //调用使用表单的hooks语法
    // console.log(props);
    let { isShow, isAdd, cancel, menulist, getMenu } = props
    const [form] = Form.useForm()
    let [valueType, setType] = useState(1)
    let [editId,setId] = useState(0)
    //确定
    const confirm = () => {
        form.validateFields().then((val) => {
            val.status = val.status == true ? 1 : 2;
            // console.log(val, 9999999);
         if(isAdd){
            menuAdd(val).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    message.success(res.msg)
                    cancelInfo()
                    getMenu();
                }
            })
         }else{
            menuUpdate({...val,
            id:editId}).then(res =>{
                if(res.code === 200){
                    message.success(res.msg)
                    cancelInfo();
                    getMenu()
                }else{
                    message.error(res.msg)
                }
            })
         }
        }).catch(err => {
            console.log(err);
        })
    };

    //取消
    const cancelInfo = () => {
        cancel()
        form.resetFields()
    };

    //封装一个查询一条数据的事件
    const lookup = (id) =>{
        setId(id)
        menuOne({id}).then(res =>{
            // console.log(res);
            form.setFieldsValue(res.list);
        })
    }
    useImperativeHandle(ref,() =>({
        lookup,
    }))
    return (
        <div>
            <Modal title={isAdd ? '添加弹窗' : '编辑弹窗'} open={isShow} onOk={confirm} onCancel={cancelInfo} cancelText='取消' okText="确认">
                <Form
                    // {...layout}
                    form={form}
                    name="control-hooks"
                    style={{
                        maxWidth: 600,
                    }}
                >
                    <Form.Item
                        name="title"
                        label="菜单名称"
                        rules={[
                            {
                                required: true,
                                message: '请输入菜单名称'
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item name="pid" label="上级菜单" rules={[{ required: true, message: '请选择上级菜单' }]}>
                        <Select placeholder="请选择上级菜单">
                            <Option value={0}>顶级菜单</Option>
                            {menulist.map((item) => (
                                <Option key={item.id} value={item.id}>
                                    {item.title}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>

                    <Form.Item name="type" label="菜单类型" initialValue={valueType}>
                        <Radio.Group defaultValue={valueType}>
                            <Radio value={1}> 目录 </Radio>
                            <Radio value={2}> 菜单 </Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item name="icon" label="菜单图标">
                        <Input />
                    </Form.Item>

                    <Form.Item name="url" label="菜单地址">
                        <Input />
                    </Form.Item>

                    <Form.Item name="status" label="状态">
                        <Switch defaultChecked />
                    </Form.Item>
                </Form>
            </Modal>
        </div >
    )
})
export default Index
 
